<script setup lang='ts'>
import { reactive, ref } from 'vue'
import { ColorTheme } from '@/api/config'
import { FormRules } from 'element-plus'
import { HeaderData, Operation as Oper } from '@/components/dTable/dTable'
import {  SearchFromJustify, SearchButton } from '@/components/dTable/dHeader'
import { PageConfig, defaultPage, defaultPageSize, defaultPageSizes, defaultLayout } from '@/components/dTable/dFooter'
import operation from '@/components/dTable/components/operation.vue'
import dTablePromote from '@/components/dTable/dTablePromote.vue'
import httpService, { RightTableParamsType, RightTableDataType } from '@/api/physicalExaminationManager/physicalPackage'

const emits = defineEmits(['addInspect'])

const formData = reactive({
  searchData: ''
})
const rules = reactive<FormRules>({
  searchData: [
    { required: false, message: '长度不超过50个字符', max: 50, trigger: ['change', 'blur'] }
  ]
})

//**** 表格相关设置 ****/
let isResetPageNo = true

// 编辑套餐
const leftRowOperButtons:Array<Oper> = [{code:'addTo', label:'添加', iconConfig:{icon:'common-addItem', type:'custom', color:ColorTheme, size:20}}]

// 左侧套餐表格数据
const rightTableData = ref<Array<RightTableDataType>>([])

// 左侧表格选中行
const seleteItem = ref<RightTableDataType>()

// 左侧表格加载状态
const showRightLoading = ref(false)

// 左侧套餐表格表头
const rightTableHeader = ref<Array<HeaderData>>([
  {prop:'itemGroupCode', label:'项目组合编码', columnType:'text', 'min-width':'120' },
  {prop:'itemGroupName', label:'项目组合名称', columnType:'text',  'min-width':'120'},
  {prop:'oper', label:'操作', columnType:'slot', 'width':'65', fixed:'right'}
])

// 左侧套餐表格搜索项设置

// 左侧套餐表格搜索项绑定数据
const rightSearchData = reactive({inspectGroupName:'', maintenanceStatus :'', deployId:''})


// 搜索项flex左对齐
const searchFromJustify = ref<SearchFromJustify>('flexStart')


//分页配置
const tablePageConfig = ref<PageConfig>({
  currentPage:defaultPage,
  pageSize:defaultPageSize,
  pageSizes:defaultPageSizes,
  total:0,
  disabled:false,
  layout:defaultLayout
})

const rightCellOperation = (name:string, row) => {
  if (name === 'addTo') {
    showRightLoading.value = true
    emits('addInspect', row.id)
  }
}

// 表格数据赋值
const setTableData = (data:Array<RightTableDataType>) => {
  data.forEach((item) => {
    item.oper = JSON.parse(JSON.stringify(leftRowOperButtons))
  })
  rightTableData.value = data
  if (isResetPageNo) {
    seleteItem.value = rightTableData.value[0]
  }
}

let curId = ''

//左边搜索
const searchButtons = ref<Array<SearchButton>>([
  {type:'inputsearch', value:'', width:280,  placeholder:'搜索体检项目编码或名称'}
])

// 获取左侧表格搜索数据
const getRightTableData = (resetPage?:boolean, id?:string) => {
  if (id) {
    curId = id
  }
  if (resetPage) {
    tablePageConfig.value.currentPage = 1
    isResetPageNo = true
  } else {
    isResetPageNo = false
  }
  if (!curId) {
    setTableData([])
    return
  }
  const item = searchButtons.value[0]
  let keyword = ''
  if (item && item.type === 'inputsearch') {
    keyword = item.value ? item.value.trim() : ''
  }

  httpService.getRightTableData({
    id: curId,
    page: tablePageConfig.value.currentPage,
    limit: tablePageConfig.value.pageSize,
    keywords: keyword
  }).then((res) => {

    showRightLoading.value = false
    const {data} = res.data

    tablePageConfig.value.total = data?.total ? data.total : 0
    setTableData(data?.records || [])

  }).catch(() => {
    showRightLoading.value = false
  })
}

// 表格每页多少行变化
const onSizeChange = () => {
  getRightTableData(true)
}

// 表格第几行变化
const onPageNoChange = () => {
  getRightTableData(false)
}

//搜索事件
const onSubmit = () => {
  getRightTableData(true)
}

const searchRightTable = () => {
  formData.searchData = formData.searchData.trim()
  getRightTableData(true)
}

const clearSearch = () => {
  formData.searchData = ''
  searchRightTable()
}

const setFormSearchClear = () => {
  formData.searchData = ''
}

const setRightTableDataNone = () => {
  curId = ''
  rightTableData.value = []
}

defineExpose({getRightTableData, setFormSearchClear, setRightTableDataNone})

</script>

<template>
  <div class="title">
    可选项目组合
  </div>

  <div class="table-content">
    <d-table-promote
      :show-index="false"
      :search-buttons="searchButtons"
      :table-data="rightTableData"
      :table-header-data="rightTableHeader"
      :page-config="tablePageConfig"
      :search-from-justify="searchFromJustify"
      :show-loading="showRightLoading"
      @form-submit="onSubmit"
      @size-change="onSizeChange"
      @current-change="onPageNoChange"
    >
      <template #searchbutton-prepend>
        <div class="search-label">
          项目组合
        </div>
      </template>
      <template #oper="scope">
        <operation class="cell-oper" :row="scope.row" :col="scope.item" @opertion-click="rightCellOperation" />
      </template>
    </d-table-promote>
  </div>
</template>

<style scoped lang="less">
.title{
  font-weight: 700;
  font-size: 15px;
  height: 40px;
  line-height: 32px;
}
.table-content {
  height: calc(100% - 40px);
  :deep(.d-table-from-con){
    margin-bottom: 16px;
  }
  .cell-oper {
    display: flex;
    justify-content: center;
  }
  :deep(.search-label){
    line-height: 32px;
    margin-right:10px;
    flex-shrink: 0;
  }

  :deep(.d-table-from-con){
    width:100%;
    &>div{
      width:100%;
    }
  }
  :deep(.d-header-form){
    flex:1;
    max-width: 280px!important;
  }
}
</style>


